<template>
    <div class="tableList">
        <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading" ref="tabList" :key="toUpdateTableKey">
            <el-table-column v-for="(item,index) in tableGroup" :key="item.label" :label="item.name" :min-width="item.width"
                :show-overflow-tooltip="item.label != 'noteImg' && item.label != 'resultImg' && item.label != 'lampLog'">
                <template slot-scope="scope">
                    <div v-if="item.label == 'noteImg' || item.label == 'resultImg'">
                        <img :src="$global.uploadUrl + scope.row[item.label]" alt=""
                            style="width:80px;height:80px;objectFit:scale-down;cursor: pointer;"
                            v-if="scope.row[item.label] !== null && scope.row[item.label] !== ''"
                            @click="handlePreview(scope.row[item.label])">
                    </div>
                    <div v-else-if="item.label == 'lampLog'">
                        <el-popover placement="left" :title="popoverTitle" width="400" trigger="click" popper-class='lampPopper'
                            @show="popoverShow(scope.row.id,scope.row.deviceSn)">
                            <span class="lampLog" slot="reference">{{scope.row.lampLog}}</span>
                            <div class="logList">
                               <div class="log_item" v-for="i in lampRequestDetails" :key="i.id">
                                    <span class="time">{{i.createTime}}</span>
                                    <span class="logdesc">{{i.content}}</span>
                               </div>
                            </div>
                        </el-popover>
                    </div>
                    <div v-else>
                        {{scope.row[item.label]}}
                    </div>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size="100"></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="searchForm.limit" layout="total,prev, pager, next,sizes"
            :total="total" background>
        </el-pagination>
        <el-dialog :visible.sync="picVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import {
        lampRequestList
    } from '@/api/lampController'
    export default {
        data() {
            return {
                tableData: [],
                toUpdateTableKey:false,
                loading: false,
                picVisible: false,
                dialogImageUrl: '',
                total: 0,
                popoverTitle:'',
                lampRequestDetails:[]
            }
        },
        props: {
            tableGroup: {
                type: Array,
                default: () => []
            },
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        methods: {
            //联络灯报表列表
            getLampRequestList(data) {
                this.loading = true
                lampRequestList(data).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.count
                        this.tableData.forEach((item, index) => {
                            item.index = (this.searchForm.page - 1) * 10 + (index + 1)
                        })
                    }
                    this.$emit('getTotal', res.count)
                    this.loading = false
                })
            },
            //图片放大
            handlePreview(url) {
                this.dialogImageUrl = url
                this.picVisible = true
            },
            popoverShow(id,deviceSn){
                this.popoverTitle = ''
                this.lampRequestDetails = []
                this.popoverTitle = deviceSn + '联络灯日志明细'
                lampRequestList({id}).then(res => {
                    if (res.code == 200) {
                      this.lampRequestDetails = res.data[0].lampRequestDetails
                    }
                })
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.searchForm.limit = val
                this.getLampRequestList(this.searchForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.searchForm.page = val
                this.getLampRequestList(this.searchForm)
            },
            updateTable() {
                this.toUpdateTableKey = !this.toUpdateTableKey
            }
        },
        beforeUpdate() {
            this.$nextTick(() => {
                this.$refs.tabList.doLayout()
            })
        }
    }
</script>

<style lang="less" scoped>
    .tableList {
        code {
            font-family: sans-serif;
        }

        .lampLog:hover {
            cursor: pointer;
            color: #409eff;
        }
    }
</style>